/*-----------------------------------*/
/* Buttons */
/*-----------------------------------*/

.btn:hover, .btn:focus {
  -webkit-transition: background-position .0s linear;
  -moz-transition: background-position .0s linear;
  -o-transition: background-position .0s linear;
  transition: background-position .0s linear;
}
.btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
  background-color: transparent;
}
.btn.active, .btn:active {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.btn {
  position: relative;
  display:inline-block;
  padding: 0;
  border: none;
  background: none;
}
.btn span,
.btn input {
  display:block;
  padding: 0 25px;
  height: 50px;
  line-height: 50px;
  outline: none;
  font-size: @font-size * 1.16;
  font-weight: 700;
  color: @button-text-color;
  white-space: nowrap;
  border: none;
  background: @button-blue;
  -webkit-transition: background 0.1s linear;
  -moz-transition: background 0.1s linear;
  -ms-transition: background 0.1s linear;
  transition: background 0.1s linear;
}
.btn-middle span, .btn-middle input {height: 42px; line-height: 40px; font-size: @font-size * 1.16; padding: 0 16px;}
.btn-small span, .btn-small input {height: 26px; line-height: 26px; font-size: @font-size * 0.77; font-weight: 400; padding: 0 12px;}
.btn-caps span, .btn-caps input {text-transform: uppercase;}
.btn-shadow span, .btn-shadow input {-webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.2); box-shadow: 3px 3px 5px rgba(0,0,0,0.2);}

.btn:hover span, .btn:hover input, .btn.hover span, .btn.hover input {background: @button-blue-hover;}
.btn:active span, .btn:active input, .btn.active span, .btn.active input {background: @button-blue-active; -webkit-box-shadow: none; box-shadow: none;}

.btn-green span, .btn-green input {background: @button-green;}
.btn-green:hover span, .btn-green:hover input, .btn-green.hover span, .btn-green.hover input {background: @button-green-hover;}
.btn-green:active span, .btn-green:active input, .btn-green.active span, .btn-green.active input {background: @button-green-active;}

.btn-gray span, .btn-gray input {background: @button-gray;}
.btn-gray:hover span, .btn-gray:hover input, .btn-gray.hover span, .btn-gray.hover input {background: @button-gray-hover;}
.btn-gray:active span, .btn-gray:active input, .btn-gray.active span, .btn-gray.active input {background: @button-gray-active;}

.btn-red span, .btn-red input {background: @button-red;}
.btn-red:hover span, .btn-red:hover input, .btn-red.hover span, .btn-red.hover input {background: @button-red-hover;}
.btn-red:active span, .btn-red:active input, .btn-red.active span, .btn-red.active input {background: @button-red-active;}

/* Buttons with Arrows */
/*-----------------------------------*/

.btn-left {margin-left: 16px !important;}
.btn-right {margin-right: 16px !important;}

.btn-left:before,
.btn-right:before {
  content: '';
  position: absolute;
  top: 0;
  left: -16px;
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-right: 16px solid @button-blue;
  -webkit-transition: border-color 0.1s linear;
  -moz-transition: border-color 0.1s linear;
  -ms-transition: border-color 0.1s linear;
  transition: border-color 0.1s linear;
}
.btn-right:before {
  left: auto;
  right: -16px;
  border-right: none;
  border-left: 16px solid @button-blue;
}
.btn-left:hover:before,
.btn-right:hover:before,
.btn-left.hover:before,
.btn-right.hover:before {
  border-left-color: @button-blue-hover;
  border-right-color: @button-blue-hover;
}
.btn-left:active:before,
.btn-right:active:before,
.btn-left.active:before,
.btn-right.active:before {
  border-left-color: @button-blue-active;
  border-right-color: @button-blue-active;
}
.btn-left.btn-green:before,
.btn-right.btn-green:before {
  border-left-color: @button-green;
  border-right-color: @button-green;
}
.btn-left.btn-green:hover:before,
.btn-right.btn-green:hover:before,
.btn-left.btn-green.hover:before,
.btn-right.btn-green.hover:before {
  border-left-color: @button-green-hover;
  border-right-color: @button-green-hover;
}
.btn-left.btn-green:active:before,
.btn-right.btn-green:active:before,
.btn-left.btn-green.active:before,
.btn-right.btn-green.active:before {
  border-left-color: @button-green-active;
  border-right-color: @button-green-active;
}
.btn-left.btn-gray:before,
.btn-right.btn-gray:before {
  border-left-color: @button-gray;
  border-right-color: @button-gray;
}
.btn-left.btn-gray:hover:before,
.btn-right.btn-gray:hover:before,
.btn-left.btn-gray.hover:before,
.btn-right.btn-gray.hover:before {
  border-left-color: @button-gray-hover;
  border-right-color: @button-gray-hover;
}
.btn-left.btn-gray:active:before,
.btn-right.btn-gray:active:before,
.btn-left.btn-gray.active:before,
.btn-right.btn-gray.active:before {
  border-left-color: @button-gray-active;
  border-right-color: @button-gray-active;
}
.btn-left.btn-red:before,
.btn-right.btn-red:before {
  border-left-color: @button-red;
  border-right-color: @button-red;
}
.btn-left.btn-red:hover:before,
.btn-right.btn-red:hover:before,
.btn-left.btn-red.hover:before,
.btn-right.btn-red.hover:before {
  border-left-color: @button-red-hover;
  border-right-color: @button-red-hover;
}
.btn-left.btn-red:active:before,
.btn-right.btn-red:active:before,
.btn-left.btn-red.active:before,
.btn-right.btn-red.active:before {
  border-left-color: @button-red-active;
  border-right-color: @button-red-active;
}
.btn-left span, .btn-left input {padding-left: 20px;}
.btn-right span, .btn-right input {padding-right: 20px;}

/* Buttons with Icons */
/*-----------------------------------*/

.btn-icon span, .btn-icon input {padding-left: 75px;}
.btn-icon-right span, .btn-icon-right input {padding-left: 25px; padding-right: 75px;}

.btn-icon:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50px;
  background-color: @button-blue - #15180a;
  background-image: url(images/icons/buttons-icons.png);
  background-position: 0 0;
  background-repeat: no-repeat;
  -webkit-transition: background 0.1s linear;
  -moz-transition: background 0.1s linear;
  -ms-transition: background 0.1s linear;
  transition: background 0.1s linear;
}
.btn-icon.btn-green:before {background-color: @button-green - #2b1a07;}
.btn-icon.btn-gray:before {background-color:  @button-gray - #231f1d;}
.btn-icon.btn-red:before {background-color: @button-red - #2b0715;}
.btn-icon-right:before {left: auto; right: 0;}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
  .btn-icon:before {
    background-image:url(images/icons/buttons-icons-x2.png);
    background-size: 50px auto;
  }
}
.btn-icon-send:before {background-position: 0 -50px;}
.btn-icon-go:before {background-position: 0 -100px;}
.btn-icon-login:before {background-position: 0 -150px;}
.btn-icon-signup:before {background-position: 0 -200px;}
.btn-icon-checkout:before {background-position: 0 -250px;}

/* middle, small */
.btn-middle.btn-icon span, .btn-middle.btn-icon input {padding-left: 52px; padding-right: 13px;}
.btn-middle.btn-icon-right span, .btn-middle.btn-icon-right input {padding-left: 13px; padding-right: 52px;}
.btn-small.btn-icon span, .btn-small.btn-icon input {padding-left: 33px; padding-right: 8px;}
.btn-small.btn-icon-right span, .btn-small.btn-icon-right input {padding-left: 8px; padding-right: 33px;}

.btn-middle.btn-icon:before {
  width: 42px;
  background-image: url(images/icons/buttons-icons-small.png);
  background-position: center 0;
}
.btn-small.btn-icon:before {
  width: 26px;
  background-image: url(images/icons/buttons-icons-small.png);
  background-position: center -64px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
  .btn-middle.btn-icon:before,
  .btn-small.btn-icon:before {
    background-image:url(images/icons/buttons-icons-small-x2.png);
    background-size: 50px auto;
  }
}

/* Follow, Like Buttons */
/*-----------------------------------*/

.btn-follow span,
.btn-like span {
  padding: 0 50px 0 6px;
  height: 36px;
  line-height: 36px;
  font-size: @font-size;
  background: @button-green;
}
.btn-like span {background: @button-blue;}

.btn-follow em,
.btn-like em {
  display: inline-block;
  height: 22px;
  line-height: 22px;
  padding: 0 8px;
  margin-right: 8px;
  background: #888;
  background: rgba(0,0,0,0.2);
  font-style: normal;
}
.btn-follow:before,
.btn-like:before {
  content: '\2b';
  font-family: 'Glyphicons Halflings';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 36px;
  background: @button-blue;
  font-size: 18px;
  line-height: 34px;
  color: #fff;
  text-align: center;
}
.btn-like:before {content: '\e125'; background: @button-green;}

/* Full Width Button */
/*-----------------------------------*/

.btn-full {display: block;}

.btn-full span,
.btn-full input {
  width: 100%;
  padding: 0 16px 0 80px;
  height: 96px;
  line-height: 96px;
  outline: none;
  font-size: @font-size * 1.39;
  text-transform: uppercase;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.16);
  text-align: left;
}
.btn-full:before,
.btn-full:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 24px;
  margin-top: -18px;
  width: 36px;
  height: 36px;
}
.btn-full:before {
  border: 1px solid @button-text-color;
  border-radius: 50%;
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.16), inset 1px 1px 1px rgba(0,0,0,0.16);
  box-shadow: 1px 1px 1px rgba(0,0,0,0.16), inset 1px 1px 1px rgba(0,0,0,0.16);
}
.btn-full:after {
  font-family: 'Glyphicons Halflings';
  content: '\e003';
  font-size: 18px;
  color: @button-text-color;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.16);
  text-align: center;
  line-height: 34px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .btn-full:before,
  .btn-full:after {
    left: 8px;
  }
  .btn-full span, .btn-full input {padding-left: 50px;}
}